<template>
    <div class="home">
        <div>
            <!-- https://asoa-1305425069.cos.ap-shanghai.myqcloud.com/1613775670045970432.mp4 -->
            <video class="video" index="3000" autoplay :muted="status" loop src="../assets/voide/11.mp4"></video>
        </div>
        <div class="m1">
            <div class="m2">
                <el-form>
                    <el-form-item label="用户名:" label-width="80px">
                        <el-input v-model="username" style="width: 200px;" clearable placeholder="请输入用户名" />
                    </el-form-item>
                    <el-form-item label="密码:" label-width="80px">
                        <el-input type="password" style="width: 200px;" show-password v-model="password" clearable
                            placeholder="请输入密码" />
                    </el-form-item>
                    <el-form-item>
                        <div style="margin-left: 90px;">
                            <el-button color="#626aef" round @click="login()">登录</el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
import { loginOnWeb } from "./api.js";
import { setStore } from "@/libs/storage.js";
import { ElMessage } from 'element-plus'
import { ref } from 'vue'
// 设置token
export default {
    data() {
        return {
            username: ref(''),
            password: ref(''),
            status: true
        }
    },
    methods: {
        login() {
            console.log(this.username,this.password);
            loginOnWeb({
                username: this.username,
                password: this.password
            }).then(res => {
                if (!res.data.success) {
                    ElMessage({
                        message: res.data.data,
                        type: 'error'
                    })
                } else {
                    setStore('token', res.data.data)
                    setStore('user',this.username)
                    ElMessage({
                        message: '登录成功',
                        type: 'success'
                    });
                    this.$router.push('/home')
                }
            })
        },
    },
    mounted() { 
    }
}
</script>
<style>
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    min-height: 661px;
    object-fit: cover;
}

.m1 {
    background-color: white;
    position: relative;
    text-align: center;
    width: 600px;
    height: 400px;
    margin: 0 auto;
    margin-top: 120px;
    border-radius: 25px;
    opacity: 0.7;
}

.m2 {
    display: inline-block;
    margin-top: 100px;
}
</style>